<template>
  <div class="login" style="height:200px">
    <header class="login-header">
      <div class="container m-top-20">
        <RouterLink class="entry"
                    to="/"
                    style="font-size:20px;float:right;color:aliceblue">进入网站首页
        </RouterLink>
      </div>
    </header>
    <nav class="login">
      <a href="javascript:;" style="font-size: 40px">账户注册</a>
    </nav>
    <div
        class="username-box"
        style="
        border: 1px solid #99a9bf;
        margin: 100px auto;
        width: 600px;
        height: 300px;
        border-radius: 20px;
      "
    >
      <div class="form" style="margin: 40px auto; width: 500px">
        <el-form
            :model="registerForm"
            :rules="rules"
            label-position="right"
            label-width="60px"
            status-icon
            ref="registerFormRef"
        >  <el-form-item label="昵称" prop="nickname">
          <el-input v-model="registerForm.nickname"/>
        </el-form-item>
          <el-form-item label="账户" prop="username">
            <el-input v-model="registerForm.username"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerForm.password" type="password"/>
          </el-form-item>
          <el-form-item label-width="22px" prop="agree">
            <el-checkbox size="large" v-model="registerForm.agree">
              我已同意隐私条款和服务条款
            </el-checkbox>
          </el-form-item>
          <el-button type="primary" round size="large" class="subBtn" @click="doRegister()">点我注册</el-button>
          <el-link type="primary" @click="$router.push('/login')" style="padding: 20px">已有账户？去登录</el-link>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {register} from "@/apis/user";
import {useUserStore} from "@/store/user";

const registerForm = ref({
  nickname:'',
  username: "",
  password: "",
  agree: true,
})

const rules = {
  nickname: [{required: true, message: "用户名不能为空", trigger: "blur"}],
  username: [{required: true, message: "用户名不能为空", trigger: "blur"}],
  password: [
    {required: true, message: "密码不能为空", trigger: "blur"},
    {min: 5, max: 14, message: "密码长度为5~14个字符", trigger: "blur"},
  ],
  agree: [
    {
      validator: (rule, value, callback) => {
        if (value) {
          callback()
        } else {
          callback(new Error('请同意该协议'))
        }
      },
    },
  ],
};
const registerFormRef = ref(null)
const userStore = useUserStore()
const router = useRouter()
const doRegister = () => {
  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      const {nickname,username, password} = registerForm.value
      await register({nickname,username,password}).then(res=>{
        if (res.code == 200){
          ElMessage({type:'success',message:res.message})
          router.replace({path:'/login'})
        }else {
          ElMessage({type:'error',message:res.message+'请登录'})
          router.replace({path:'/login'})
        }

      })
    }
  })
}
</script>